<template>
	<div class="inspection-standard">
		<el-card>
			<template #header>
				<div class="header-bar">
					点巡检标准管理
					<el-button type="primary" size="small" @click="openDialog('add')">新增标准</el-button>
				</div>
			</template>

			<el-table :data="standardList" border stripe>
				<el-table-column prop="name" label="标准名称" />
				<el-table-column prop="deviceType" label="设备类型" />
				<el-table-column prop="tool" label="使用工具" />
				<el-table-column label="检查项数量" width="100">
					<template #default="scope">
						{{ scope.row.items.length }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button type="text" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button type="text" @click="removeRecord(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
				<el-form :model="form" label-width="100px">
					<el-form-item label="标准名称">
						<el-input v-model="form.name" />
					</el-form-item>
					<el-form-item label="设备类型">
						<el-input v-model="form.deviceType" />
					</el-form-item>
					<el-form-item label="使用工具">
						<el-input v-model="form.tool" />
					</el-form-item>
					<el-form-item label="检查项">
						<el-table :data="form.items" size="small" border>
							<el-table-column label="名称">
								<template #default="scope">
									<el-input v-model="scope.row.name" placeholder="如：螺栓紧固" />
								</template>
							</el-table-column>
							<el-table-column label="记录方式">
								<template #default="scope">
									<el-input v-model="scope.row.method" placeholder="如：文字/数值/选择" />
								</template>
							</el-table-column>
							<el-table-column label="正常值">
								<template #default="scope">
									<el-input v-model="scope.row.normal" />
								</template>
							</el-table-column>
							<el-table-column label="异常值">
								<template #default="scope">
									<el-input v-model="scope.row.abnormal" />
								</template>
							</el-table-column>
							<el-table-column label="默认值">
								<template #default="scope">
									<el-input v-model="scope.row.default" />
								</template>
							</el-table-column>
							<el-table-column width="100" label="操作">
								<template #default="scope">
									<el-button type="text" @click="form.items.splice(scope.$index, 1)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>

						<el-button size="small" @click="addItem" class="mt-2">添加检查项</el-button>
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm">保存</el-button>
				</template>
			</el-dialog>
		</el-card>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)
const dialogTitle = ref('')
const currentIndex = ref(-1)
const form = ref({})

const standardList = ref([...Array(10)].map((_, i) => ({
	name: `点检标准 ${i + 1}`,
	deviceType: ['泵类', '阀类', '电机'][i % 3],
	tool: ['扳手', '检测仪', '钳子'][i % 3],
	image: '',
	items: [
		{ name: '螺栓紧固', method: '文字', normal: '紧', abnormal: '松', default: '紧' },
		{ name: '表面温度', method: '数值', normal: '≤40°C', abnormal: '>40°C', default: '36°C' }
	]
})))

const openDialog = (type, row = null) => {
	dialogTitle.value = type === 'add' ? '新增点巡检标准' : '编辑点巡检标准'
	dialogVisible.value = true
	if (type === 'edit') {
		form.value = { ...row, items: [...row.items] }
		currentIndex.value = standardList.value.findIndex(i => i.name === row.name)
	} else {
		form.value = {
			name: '', deviceType: '', tool: '', image: '', items: []
		}
		currentIndex.value = -1
	}
}

const submitForm = () => {
	if (currentIndex.value >= 0) {
		standardList.value[currentIndex.value] = { ...form.value }
	} else {
		standardList.value.push({ ...form.value })
	}
	dialogVisible.value = false
}

const addItem = () => {
	form.value.items.push({
		name: '', method: '', normal: '', abnormal: '', default: ''
	})
}

const removeRecord = (index) => {
	if (confirm('删除前请确认该标准未被任务引用')) {
		standardList.value.splice(index, 1)
	}
}

const handleUpload = () => {
	form.value.image = 'uploaded'
}
</script>

<style scoped>
.inspection-standard {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}

.mt-2 {
	margin-top: 10px;
}
</style>
  
